<template>
  <div>
    <ProductParams :title="res.name"/>
    <div class="detail">
      <div class="wrapper">
        <div class="detail_left fl">
          <div class="swiper-box">
            <swiper :options="swiperOption"  ref="mySwiper" >
                <!-- slides -->
                <swiper-slide
                  v-for="(item,index) in swiperList" :key="index"
                >
                  <img :src="item.path" alt="">
                </swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
          </div>
        </div>
        <div class="detail_right fr">
          <h2 class="item-title">{{res.name}}</h2>
          <p class="item-info">{{res.desc}}</p>
          <div class="delivery">雷蛇官方店</div>
          <p class="item-price">{{res.sale_price}} <span class="del">{{res.price}}</span></p>
          <div class="line"></div>
          <div class="item-addr">
            <i class="icon-loc"></i>
            <div class="addr">北京 北京市 朝阳区 安定门街道</div>
            <div class="stock">有现货</div>
          </div>
          <div class="item-version">
            <h2>选择版本</h2>
            <div class="phone fl">512GB固态硬盘</div>
            <div class="phone fr">1T固态硬盘</div>
          </div>
          <div class="item-color">
            <h2>选择颜色</h2>
            <div class="phone checked">
              <span class="color"></span>
              深空灰
            </div>
          </div>
          <div class="item-total">
            <div class="phone-info">
              <div class="fl">{{res.name}} 1T固态硬盘 深灰色</div>
              <div class="fr">{{res.sale_price}}</div>
            </div>
            <div class="phone-total">总计：{{res.sale_price}}</div>
          </div>
          <div class="btn-group">
            <a class="btn btn-huge fl" @click="ToCart(res.id)">加入购物车</a>
          </div>
        </div>
      </div>
      <div class="price-info">
        <div class="container">
          <h2>价格说明</h2>
          <div class="desc">
            <img src="/img/detail/item-price.jpeg" alt="">
          </div>
        </div>
      </div>
      <div class="service">
      <div class="service_container">
        <div>
          <i class="icon">
            <img src="/img/icon-setting.png" alt="">
          </i>预约维修服务
        </div>
        <div>
          <i class="icon">
            <img src="/img/icon-7day.png" alt="">
          </i>7天无理由退货
        </div>
        <div>
          <i class="icon">
            <img src="/img/icon-15day.png" alt="">
          </i>15天免费换货
        </div>
        <div>
          <i class="icon">
            <img src="/img/icon-post.png" alt="">
          </i>满150元包邮
        </div>
      </div>
      </div>
    </div>   
  </div>

</template>

<script>
import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import { autoplay } from 'swiper'
import ProductParams from '../components/ProductParams'
import {get,Data} from '../assets/js/request'
import api from '../assets/js/api'
export default {
  data(){
    return {
      props:['id'],
      res:{},
      swiperOption:{
        autoplay:true,
        // loop:true,
        slidesPerView : 'auto',
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
      swiperList:[
                {
                    id:10,
                    img:'/img/detail/phone-1.jpg'
                },
            ],
    }
  },
  components:{
    "swiper":Swiper,
    "swiper-slide":SwiperSlide,
    ProductParams
  },
  async created(){
    console.log(this.$route);
    let a = this.$route.params.id;
    let res = await get(api.product+a);
    this.res = res;
    this.swiperList = res.s_photos
    console.log(this.res);
  },
  methods:{
    async ToCart(val){
      let res = await Data('post','cart',{goods_id: this.$route.params.id,num: 1})
      this.$router.push({name:'cart',params:{project_id:this.res.project_id}})
    }
  }
}
</script>

<style lang="scss" scoped>
.detail{
  width: 100%;
  margin: 0 auto;
  background-color: white;
  // display: flex;
  .fl{
    float: left;
  }
  .fr{
    float: right;
  }
  img{
    width: 100%;
    height: 100%;
  }
  .wrapper{
    width: 90%;
    height: 900px;
    margin: 0 auto;
    .detail_left{
      width: 560px;
      margin-top: 10px;
      .swiper-contianer{
        width: 100%;
        height: 800px;

      }
    }
    .detail_right{
      height: 870px;
      .item-title{
        font-size: 28px;
        padding-top: 30px;
        padding-bottom: 16px;
        height: 26px;
      }
      .item-info{
        font-size: 20px;
        height: 36px;
        margin-top: 15px;
      }
      .delivery{
        font-size: 16px;
        color: #ff6700;
        margin-top: 15px;
        margin-bottom: 14px;
        height: 15px;
      }
      .item-price{
        font-size: 20px;
        color: #ff6700;
        height: 19px;
        .del{
          font-size: 16px;
          color: #999;
          margin-left: 10px;
          text-decoration: line-through;
        }
      }
      .line{
        height: 0;
        margin-top: 25px;
        margin-bottom: 28px;
        border-top: 1px solid #e5e5e5;
      }
      .item-addr{
        height: 108px;
        background-color: lightgrey;
        border: 1px solid #e5e5e5;
        box-sizing: border-box;
        padding-top: 31px;
        padding-left: 64px;
        font-size: 14px;
        line-height: 14px;
        position: relative;
        .icon-loc{
          position: absolute;
          top: 27px;
          left: 34px;
          display: inline-block;
          width: 20px;
          height: 20px;
          background: url(/img/icon-loc.png) no-repeat 50%;
          background-size: contain;
        }
        .addr{
              color: #666;
        }
        .stock{
          margin-top: 15px;
          color: #ff6700;
        }
      }
      .item-version{
          margin-top: 30px;
          height: 70px;
          .phone{
            width: 287px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            border: 1px solid #e5e5e5;
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
            margin-right: 10px;
            margin-top: 10px;
          }
      }
      .item-color{
        margin-top: 30px;
        h2{
          font-size: 18px;
          margin-bottom: 20px;
        }
        .phone{
          width: 287px;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          box-sizing: border-box;
          text-align: center;
          cursor: pointer;
          
          .color{
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: gray;
          }
        }
      }
      .item-total{
        height: 140px;
        background: lightgrey;
        padding: 24px 33px 29px 30px;
        font-size: 14px;
        margin-top: 50px;
        margin-bottom: 30px;
        box-sizing: border-box;
        .phone-info{
          height: 50px;
        }
        .phone-total{
          font-size: 24px;
          color: #f60;
          margin-top: 18px;
        }
      }
      .btn-group{
        .btn{
          display: inline-block;
          text-align: center;
          background-color: #f60;
          color: #fff;
          border: none;
          cursor: pointer;
        }
        .btn-huge{
          width: 300px;
          height: 54px;
          line-height: 54px;
          font-size: 16px;
        }
      }
    }
  }  
  .price-info{
    background-color: #f3f3f3;
    height: 340px;
    .container{
      position: relative;
      width: 80%;
      margin-right: auto;
      margin-left: auto;
      h2{
        font-size: 24px;
        color: #333;
        padding-top: 38px;
        margin-bottom: 30px;
      }
    }
  }
  .service{
    width: 100%;
    text-align: center;
    border-bottom: solid 4px #ff6700;
    .service_container{
        width: 1226px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        div{
            width: 305px;
            line-height: 85px;
            position: relative;
            i{
              width: 20px;
              height: 20px;
              display: inline-block;
              img{width: 100%; height: 100%;}
              vertical-align:sub;
            }
            &::after{
              position: absolute;
              right: 0;
              top: 30%;
              content: '';
              height: 34px;
              width: 1px;
              background-color: #f5f5f5;
            }
            &:last-child::after{
                display: none;
              }
        }
    }
      
  }
  .checked{
    border: 1px solid #f60;
    color: #f60;
  }
  .swiper-container{
    height: 600px;
  }
}

</style>